<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0012: Layout Containers | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0012: Layout Containers" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to use a GTK Layout container to organize UI widgets - a D language tutorial." />
<meta property="og:description" content="How to use a GTK Layout container to organize UI widgets - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0012-layout-containers.html" />
<meta property="og:url" content="http://localhost:4000/posts/0012-layout-containers.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-02-22T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0012: Layout Containers" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-02-22T00:00:00-05:00","datePublished":"2019-02-22T00:00:00-05:00","description":"How to use a GTK Layout container to organize UI widgets - a D language tutorial.","headline":"0012: Layout Containers","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0012-layout-containers.html"},"url":"http://localhost:4000/posts/0012-layout-containers.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/container.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-02-22T00:00:00-05:00" itemprop="datePublished">Friday, February 22, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0012-layout-containers">0012: Layout Containers</h1>

<p>Starting today, we’ll be looking at a few examples of using a <code class="language-plaintext highlighter-rouge">Layout</code> container. Since we’ve already covered the <code class="language-plaintext highlighter-rouge">Box</code> container, playing with <code class="language-plaintext highlighter-rouge">Layout</code> containers won’t be foreign, so we’ll throw in some extra techniques to keep it interesting, things like presenting a button vertically instead of horizontally.</p>

<p>Today’s example files show:</p>

<ul>
  <li>a rotated button and</li>
  <li>multiple buttons in a layout.</li>
</ul>

<h2 id="why-a-layout">Why a Layout?</h2>

<p>Placing widgets in a container using absolute coordinates is discouraged. Why? If your application is translated into another language or the user fiddles with font settings at the OS level, the beauty and balance of your layout is going out the window… so to speak.</p>

<p>But if you’re just writing utilities and applications for your own use, then hey: knock yourself out. (I do.) Anyway, it’s included here for completeness sake, so let’s get at it and since the <code class="language-plaintext highlighter-rouge">main()</code> function and the <code class="language-plaintext highlighter-rouge">TestRigWindow</code> class are the same as other examples, let’s look at the meat.</p>

<h2 id="put-that-widget-down">Put that Widget Down</h2>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyLayout</span> <span class="p">:</span> <span class="n">Layout</span>
<span class="p">{</span>
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>

		<span class="n">RotatedButton</span> <span class="n">rotatedButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">RotatedButton</span><span class="p">();</span>
		<span class="n">put</span><span class="p">(</span><span class="n">rotatedButton</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class MyLayout</span>
</code></pre></div></div>

<p>Like the <code class="language-plaintext highlighter-rouge">Box</code> we used in earlier examples, the derived <code class="language-plaintext highlighter-rouge">Layout</code> is mostly about getting the kids under control. The big difference here is that we don’t rely on the container to work out where things go. Instead, we use the <code class="language-plaintext highlighter-rouge">put()</code> function which takes a pointer to the child widget as well as the x and y coordinates where you want it placed.</p>

<p>Another drawback of using a <code class="language-plaintext highlighter-rouge">Layout</code>, and therefore the <code class="language-plaintext highlighter-rouge">put()</code> function, is that it’s going to take several code-compile-test cycles before you can lock down exactly what <strong>x</strong> and <strong>y</strong> should be. And these cycles increase in number with the complexity of your design. If for no other reason, you may want to let the <code class="language-plaintext highlighter-rouge">Layouts</code> lie and pack some <code class="language-plaintext highlighter-rouge">Box</code>es instead.</p>

<h2 id="rotated-button">Rotated Button</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/004_layout/layout_01.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/004_layout/layout_01_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/004_layout/layout_01_rotated.d" target="_blank">here</a>.
	</div>
</div>

<p>And here’s that rotated button I mentioned earlier:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">RotatedButton</span> <span class="p">:</span> <span class="n">Button</span>
<span class="p">{</span>
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">();</span>
		
		<span class="n">RotatedLabel</span> <span class="n">rotatedLabel</span> <span class="p">=</span> <span class="k">new</span> <span class="n">RotatedLabel</span><span class="p">();</span>
		
		<span class="n">addOnClicked</span><span class="p">(</span><span class="k">delegate</span> <span class="kt">void</span><span class="p">(</span><span class="n">_</span><span class="p">)</span> <span class="p">{</span> <span class="n">doSomething</span><span class="p">();</span> <span class="p">}</span> <span class="p">);</span>
		<span class="n">add</span><span class="p">(</span><span class="n">rotatedLabel</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>

	
	<span class="kt">void</span> <span class="n">doSomething</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"Action from a rotated button..."</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// doSomething()</span>
	
<span class="p">}</span> <span class="c1">// class rotatedButton</span>
</code></pre></div></div>

<p>Of course, there’s nothing here to indicate it’s at a non-standard angle. Nope, it’s all pretty straightforward here. So, where is the angle set?</p>

<h3 id="the-real-rotated-widget-the-label">The Real Rotated Widget: the Label</h3>

<p>The rotation is in here with the <code class="language-plaintext highlighter-rouge">setAngle()</code> function:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">RotatedLabel</span> <span class="p">:</span> <span class="n">Label</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">rotatedText</span> <span class="p">=</span> <span class="s">"My Rotated Label on a Button"</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">rotatedText</span><span class="p">);</span>
		
		<span class="n">setAngle</span><span class="p">(</span><span class="mi">90</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class RotatedLabel</span>
</code></pre></div></div>

<p>It’s done this way because <code class="language-plaintext highlighter-rouge">setAngle()</code> is only found in the Label widget. But whatever gets the job done, right? There’s a lot of that in GUI design.</p>

<h3 id="counter-intuitive">Counter Intuitive?</h3>

<p>Something else to keep in mind: angles go counter-clockwise. So if you want something angled 90 degrees to clockwise, you’ll have to set it to 270 degrees.</p>

<h2 id="conclusion">Conclusion</h2>

<p>And that’s pretty much it for this time. Yes, I mentioned a second code file at the beginning of this post, but all it does is <code class="language-plaintext highlighter-rouge">put()</code> a second button in the layout. Neither button is rotated, nor do they do anything we haven’t seen before, so there’s nothing new or exciting in the second example. It’s there mainly because I’d feel remiss if I didn’t show a button in a standard position/rotation.</p>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/004_layout/layout_02.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/004_layout/layout_02_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/004_layout/layout_02_put_multiple.d" target="_blank">here</a>.
	</div>
</div>

<p>And with that said, <em>Insert vague comparison between</em> GTK <em>and popular space opera culture here.</em></p>

<p>Bye, now.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0011-callback-chains.html">Previous: Callback Chains</a>
	</div>
	<div style="float: right;">
		<a href="./0013-scrolled-layout.html">Next: Scrolled Layout</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0012-layout-containers.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
